<div class="component-permission-table-container" [@fadeIn]="'active'">
    <form class="form-vertical" role="form">
        <div class="row">
            <div class="col-md-11">
                <div class="input-group">
                    <input [(ngModel)]="searchStr" name="searchStr" class="form-control" type="text"
                        placeholder="组件名称或者权限字符串" />
                    <span class="input-group-btn">
                        <button class="btn btn-secondary" type="button" (click)="searchPermission()">
                            <i class="fa fa-search" aria-hidden="true"></i>
                        </button>
                    </span>
                </div>
            </div>
            <div class="col-md-1">
                <div class="input-group pull-right">
                    <button class="btn btn-primary" type="button"
                        (click)="editComponentPermission({compPermId:-1,parentEntity:{compPermId:-1}},false)">
                        <i class="fa fa-plus" aria-hidden="true"></i>
                    </button>
                </div>
            </div>
        </div>
    </form>
    <div class="row">
        <div class="col-md-12">
            <div class="permission-item-container">
                <p-treeTable [value]="compPermList" [columns]="selectedColumns" [paginator]="true" [rows]="10"
                    [resizableColumns]="true" columnResizeMode="expand" [scrollable]="true">
                    <ng-template pTemplate="caption">
                        <div style="text-align:left">
                            <p-multiSelect [options]="cols" [(ngModel)]="selectedColumns" optionLabel="header"
                                name="cols" [style]="{ width: '100%'}" selectedItemsLabel="{0} columns selected"
                                defaultLabel="筛选" display="chip"></p-multiSelect>
                        </div>
                    </ng-template>
                    <ng-template pTemplate="header" let-columns>
                        <tr>
                            <th *ngFor="let col of columns">
                                {{ col.header }}
                            </th>
                            <th style="width: 15rem">
                                操作
                            </th>
                        </tr>
                    </ng-template>
                    <ng-template pTemplate="body" let-rowNode let-rowData="rowData" let-columns="columns">
                        <tr>
                            <td *ngFor="let col of columns; let i = index">
                                <p-treeTableToggler [rowNode]="rowNode" *ngIf="i === 0"></p-treeTableToggler>
                                {{ rowData[col.field] }}
                            </td>
                            <td style="width: 15rem;text-align: right;">
                                <p-button icon="fa fa-pencil" styleClass="p-button-success"
                                    [style]="{ 'margin-right': '.5em' }"
                                    (click)="editComponentPermission(rowData,false)"></p-button>
                                <!-- 点击加号表示创建子节点 -->
                                <p-button icon="fa fa-plus" styleClass="p-button-warning"
                                    [style]="{ 'margin-right': '.5em' }"
                                    (click)="editComponentPermission(rowData,true)"></p-button>
                                <p-button icon="fa fa-trash" styleClass="p-button-danger"
                                    (click)="delComponentPermission(rowData)"></p-button>
                            </td>
                        </tr>
                    </ng-template>
                </p-treeTable>
            </div>
        </div>
    </div>
</div>